<script>
import { defineComponent, reactive, ref, toRefs } from "vue";

export default defineComponent({
  // 入口函数
  setup() {
    const state = reactive({
      msg: "hello",
      count: 0,
      name: "fang",
      arr: [
        { title: 1, id: 1 },
        { title: 2, id: 2 },
      ],
    });

    const change = () => {
      state.count++;
      state.arr.push({ title: 3333, id: state.arr.length + 1 });
    };

    return {
      ...toRefs(state),
      change,
    };
  },
});
</script>

<template>
  <div>
    {{ msg }} {{ count }}
    <ul>
      <li v-for="(v, i) in arr" :key="i">{{ v.title }}</li>
    </ul>
    <button @click="change">click</button>
  </div>
</template>

<style scoped></style>
